import React from 'react';
import { message, Radio, Checkbox, Button, Select, Input, Form, Icon, Switch, Table } from 'antd';
import _ from 'lodash';

const CheckboxGroup = Checkbox.Group,
    FormItem = Form.Item,
    Option = Select.Option,
    RadioGroup = Radio.Group,
    RadioButton = Radio.Button;

import { changePage,_validate,check_rules } from '../store/actions';
const tempData = {
    username:'zhangsan',
    id:'specialist_id_01',
    account_id:'account_id_01',
    name:'张三',
    gender:'M',
    idcard:'410103199912125469',
    reg_date:'2016-05-05',
    last_modified_date:'2016-05-05',
    mobile:'13666666666',
    status:0
};
class FormEditUser extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            rules:{}
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.resetFields = this.resetFields.bind(this);
        this.checkMob = this.checkMob.bind(this);
    }
    resetFields(){
        this.props.form.resetFields()
    }
    static contextTypes = {
        router:React.PropTypes.object
    };
    handleSubmit(e){
        e.preventDefault();
        const _this = this;
        _validate(e,_this,function(data){
            if(data.status){
                data.status = 1
            }else{
                data.status = 0
            }
            console.log('提交的数据',data)
        })
    }
    componentWillMount(){
        const _this = this;
        _this.props.dispatch(check_rules(function(rules){
            _this.setState({
                rules:rules.content
            })
        }));
        const {setFieldsValue} = this.props.form;
        if(this.props.id){
            setFieldsValue(tempData)
        }else{
            setFieldsValue()
        }
    }
    onChange(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    onSwitch(checkedValues) {
        console.log('checked = ', checkedValues);
    }
    checkForm(a,b,rule, value, callback){
        const _r = eval(this.state.rules[a][b]['expr']),
            msg = this.state.rules[a][b]['rule'];
        (function(){
            const result = _r.test(value);
            if (!result && value) {
                callback(msg)
            }else {
                callback();
            }
        })()
    }
    checkUserName(rule, value, callback){
        this.checkForm('account','username',rule, value, callback)
    }
    checkNickName(rule, value, callback){
        this.checkForm('account','nickname',rule, value, callback)
    }
    checkName(rule, value, callback){
        this.checkForm('account','name',rule, value, callback)
    }
    checkMob(rule, value, callback){
        this.checkForm('common','mobile',rule, value, callback)
    }
    checkIdcard(rule, value, callback){
        this.checkForm('common','idcard',rule, value, callback)
    }
    render() {
        const { getFieldProps } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 }
        };
        if(this.state.roleFetch){
            return (<div>loading...</div>)
        }else{
            const userUserName = getFieldProps('username', {
                rules: [
                    { required: true, message: '请输入用户名'},
                    { validator: this.checkUserName.bind(this) }
                ]
            });
            const userName = getFieldProps('name', {
                rules: [
                    { required: true, message: '请输入姓名'},
                    { validator: this.checkName.bind(this) }
                ]
            });
            const userNickName = getFieldProps('nickname', {
                rules: [
                    { required: true, message: '请输入昵称'},
                    { validator: this.checkNickName.bind(this) }
                ]
            });
            const mobProps = getFieldProps('mobile', {
                rules: [
                    { required: true, message: '请输入手机号' },
                    { validator: this.checkMob.bind(this) }
                ]
            });
            const idCardProps = getFieldProps('idcard', {
                rules: [
                    { required: true, message: '请输入身份证号' },
                    { validator: this.checkIdcard.bind(this) }

                ]
            });
            const userStatus = getFieldProps('status');

            const genderProps = getFieldProps('gender', {
                rules: [
                    { required: true, message: '请选择专家性别' }
                ]
            });
            return (
                <Form horizontal form={this.props.form}>
                    <FormItem
                        {...formItemLayout}
                        label="用户名"
                    >
                        <Input
                            {...userUserName}
                            placeholder="请输入用户名"
                        />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="用户姓名"
                    >
                        <Input
                            {...userName}
                            placeholder="请输入用户姓名"
                        />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="昵称"
                    >
                        <Input
                            {...userNickName}
                            placeholder="请输入用户昵称"
                        />
                    </FormItem>

                    <FormItem
                        {...formItemLayout}
                        label="身份证号"
                    >
                        <Input {...idCardProps} placeholder="请输入身份证号" />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="专家性别"
                    >
                        <RadioGroup {...genderProps}>
                            <RadioButton value="M">男</RadioButton>
                            <RadioButton value="F">女</RadioButton>
                        </RadioGroup>
                    </FormItem>
                    <FormItem
                        label="手机号"
                        {...formItemLayout}
                    >
                        <Input {...mobProps} placeholder="请输入手机号" />
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="用户状态"
                    >
                        <Switch {...userStatus} defaultChecked={tempData.status == 1 ? true: false} />
                    </FormItem>
                    {(this.state.showBtn!=false)?(<FormItem wrapperCol={{ span: 16, offset: 6 }}>
                        <Button type="primary" onClick={this.handleSubmit}>保存</Button>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <Button type="light" onClick={function(){
                                this.context.router.goBack(-1)
                            }.bind(this)}>取消</Button>
                    </FormItem>):''}
                </Form>
            )
        }
    }

}

export default FormEditUser = Form.create()(FormEditUser);